<template>
  <div class="padding flex direction-column">
    <div class="search-form">
      <el-form inline>
        <year-month-picker v-model="time"></year-month-picker>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="clickSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bg-white border-radius content-block">
      <div class="info-head">全市能源审计工作情况</div>
      <div class="padding info-content">
        <el-table
          class="table" v-loading="loading1" :data="lists1"
          :header-cell-style="{
            backgroundColor: themeColor,
            color: 'white'
          }"
        >
          <div slot="empty" class="empty-lists">
            <svg-icon name="search"></svg-icon>
            <span class="empty-text">暂无数据</span>
          </div>
          <el-table-column v-for="column in columns1" :key="column.prop" v-bind="column">
            <template v-if="column.prop === 'col1'" #default="{ row }">
              <el-link :underline="false" type="primary" @click="navigateToEnterpriseAnalysis(row)">{{row.col1}}</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="margin-top bg-white border-radius content-block" v-if="false">
      <div class="info-head">全市能源审计收益分析</div>
      <div class="padding info-content">
        <el-table
          class="table" v-loading="loading2" :data="lists2"
          :header-cell-style="{
            backgroundColor: themeColor,
            color: 'white'
          }"
        >
          <div slot="empty" class="empty-lists">
            <svg-icon name="search"></svg-icon>
            <span class="empty-text">暂无数据</span>
          </div>
          <el-table-column v-for="column in columns2" :key="column.prop" v-bind="column"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import Navigate2enterpriseAnalysis from '@/mixins/navigate2enterpriseAnalysis'
import TimePicker from '@/mixins/time-picker'

export default {
  name: 'energy-efficiency-analysis-audit',
  mixins: [TimePicker, Navigate2enterpriseAnalysis],
  data () {
    return {
      loading1: false,
      lists1: [],
      columns1: [
        { label: '县（市、区）', prop: 'col1' },
        { label: '重点企业数量（家）', prop: 'col2' },
        { label: '本年度开展（家）', prop: 'col3' },
        { label: '结构节能项目（个）', prop: 'col4' },
        { label: '技术节能项目（个）', prop: 'col5' },
        { label: '管理节能项目（个）', prop: 'col6' },
        { label: '合计节能潜力（吨标准煤/年）', prop: 'col7', width: 200 },
        { label: '合计投资（万元）', prop: 'col8' },
        { label: '合计收益（万元）', prop: 'col9' },
      ],
      loading2: false,
      lists2: [],
      columns2: [
        { label: '县（市、区）', prop: 'col1' },
        { label: '重点企业数量（家）', prop: 'col2' },
        { label: '本年度开展（家）', prop: 'col3' },
        { label: '结构节能项目（个）', prop: 'col4' },
        { label: '技术节能项目（个）', prop: 'col5' },
        { label: '管理节能项目（个）', prop: 'col6' },
        { label: '合计节能潜力（吨标准煤/年）', prop: 'col7', width: 200 },
        { label: '合计投资（万元）', prop: 'col8' },
        { label: '合计收益（万元）', prop: 'col9' },
      ],
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    districts () {
      return this.$store.getters['user/districts']
    },
  },
  mounted () {
    this.query()
  },
  methods: {
    query () {
      this.loading1 = true
      this.loading2 = true
      // TODO
      const districts = this.districts
      const promise1 = new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          this.loading1 = false
          this.lists1 = districts.map((v, i) => ({
            id: v.code,
            col1: v.name,
            col2: '-',
            col3: '-',
            col4: '-',
            col5: '-',
            col6: '-',
            col7: '-',
            col8: '-',
            col9: '-',
          }))
        }, 300)
      })
      const promise2 = new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          this.loading2 = false
          this.lists2 = districts.map((v, i) => ({
            id: v.code,
            col1: v.name,
            col2: '-',
            col3: '-',
            col4: '-',
            col5: '-',
            col6: '-',
            col7: '-',
            col8: '-',
            col9: '-',
          }))
        }, 400)
      })
      return Promise.all([promise1, promise2])
    },
    clickSearch () {
      this.$nextTick(() => {
        this.query()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .info-head {
    padding: 20px $gutter 0 $gutter;
    font-size: 16px;
  }
</style>
